<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素属性</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

        const obj = {
            name: "蛋哥",
            age: 18,
            hobby: "发表情包"
        }

        const objJsx = (
            <div>{
                // ['name', 'age', 'hobby']
                // Object.keys(obj)

                Object.keys(obj).map(
                    attr=><p key={attr}>{attr}:{obj[attr]}</p>
                )
            }</div>
        )

        function createJsx(obj) {
            const jsxArr = []
            for (let attr in obj) {
                jsxArr.push(<p key={attr}>{attr}:{obj[attr]}</p>)
            }
            return jsxArr
        }

        // ReactDOM.render(objJsx, document.querySelector("#root"))
        ReactDOM.render(createJsx(obj), document.querySelector("#root"))
    </script>
</body>

</html>